<template>
	<view class="show-modal" @touchmove.prevent v-show="sb">
		<view :class="{ bg: true, 'bg-active': !activeModal }"></view>
		<view :class="{ 'modal-content': true, 'modal-content-active': activeModal, 'modal-content-remove': aaa }">
			<view class="title">{{ option.title }}</view>
			<view class="content">{{ option.content }}</view>
			<view class="btn">
				<view class="btn-cancel button" @click="handleClick(false)">{{ option.showCancel }}</view>
				<view class="btn-confirm button" @click="handleClick(true)">{{ option.confirmText }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'

const activeModal = ref(false)
const aaa = ref(true)
// const emits = defineEmits(['showModal'])

const props = defineProps({
	showModal: {
		type: Boolean,
		default: false
	},
	option: {
		type: Object,
		default: (e) => ({
			title: '提示',
			content: '',
			showCancel: '取消',
			confirmText: '确定',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
				}
				else if (res.cancel) {
					console.log('用户点击取消');
				}
			},

			...e
		})
	}
})


let timer = null
const sb = computed(() => {

	if (props.showModal) {

		timer = setTimeout(() => {
			activeModal.value = false
			timer = null
		});
	}
	else {
		timer = setTimeout(() => {

			activeModal.value = true

			setTimeout(() => {
				timer = null

			}, 200);
		});
	}

	return props.showModal
})




const handleClick = (btn) => {
	if (timer) return
	aaa.value = false
	activeModal.value = true
	timer = setTimeout(() => {
		// emits('showModal', false)
		timer = null
		aaa.value = true


		if (btn) props.option.success({ confirm: true, cancel: false })
		else props.option.success({ confirm: false, cancel: true })
	}, 200);


}



</script>
<style scoped lang="scss">
.show-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;

	.bg {
		height: 100%;
		width: 100%;
		// background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 0;
		left: 0;
		transition: all 0.2s ease-in;
	}

	.bg-active {
		background-color: rgba(0, 0, 0, 0.3);
		transition: all 0.2s ease-out;
	}

	.modal-content {
		background-color: #fff;
		width: 600rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		gap: 20rpx;
		z-index: 104;





		.title {
			font-size: 36rpx;
			font-weight: 600;
			padding-top: 20rpx;
		}

		.content {
			font-size: 30rpx;
			color: #888;
			// padding: 20rpx;
			text-align: center
		}

		.btn {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			width: 100%;
			padding: 20rpx 0;

			.button {
				padding: 15rpx 80rpx;
				border-radius: 1000rpx;
				font-weight: bold;
			}

			.btn-cancel {
				border: 1rpx solid #ddd;
			}

			.btn-confirm {
				background-color: #e96666;
				color: #fff;
			}
		}
	}

	.modal-content-active {
		opacity: 0;
		transform: scale(0);
		z-index: 104;
		transition: all 0.2s ease-in;
		animation: remove 0.2s ease-in;

		@keyframes remove {
			0% {
				transform: scale(1);
				opacity: 1;
			}

			25% {
				transform: scale(1.05);
			}

			100% {
				transform: scale(0);
				opacity: 0;
			}
		}

	}

	.modal-content-remove {
		transition: all 0.2s ease-out;
		animation: appear 0.2s ease-out;

		@keyframes appear {
			0% {
				transform: scale(0);
				opacity: 0;
			}

			75% {
				transform: scale(1.05);
			}

			100% {
				transform: scale(1);
				opacity: 1;
			}
		}
	}
}
</style>
<style></style>